<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="分享"
      left-arrow
      @click-left="
        () => {
          $router.back('/home');
        }
      "
      @click-right="onClickRight"
    />

    <van-cell @click="showShare = true" />
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />

    <!-- 渲染 -->
    <div v-for="item in detail">
      <img :src="v.goods_id" alt="" />
      <h4>{{ v.goods_name }}</h4>
    </div>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button type="warning" text="加入购物车" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup>
import { detailApi } from "@/api/mock";
import { ref } from "vue";
let detail = ref({});
detailApi().then((res) => {
  console.log("详情数据", res);
  detail.value = res.data.message;
});

import { useRoute } from "vue-router";
let route = new useRoute();
const v = route.query;
console.log(route.query);

const showShare = ref(false);
const options = [
  { name: "微信", icon: "wechat" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" },
  { name: "分享海报", icon: "poster" },
  { name: "二维码", icon: "qrcode" },
];
const onClickRight = () => {
  showShare.value = true;
};
</script>

<style lang="scss" scoped></style>
